import React, { useEffect, useState ,useRef} from "react";
import axios from "axios";
import "./Video.css";

export default function Video() {
  const [videoList, setVideoList] = useState([]);
  const inputRef = useRef();
  const getVideoList = async () => {
    const { data } = await axios({
      url: "https://www.fastmock.site/mock/3c57048e50458aa2642d6a0a9c5445bc/videolis/test",
      method: "get",
    })
    setVideoList(data.data);
    // setVideoList(data.filter((item) => {
    //   return item.titile.includes(inputRef.current.value) ? setVideoList(data.data) : null}));
  };
  
  useEffect(() => {
    getVideoList();
  }, []);

  return (
    <div>
      <div className="top">
        <div className="video-top">
          <div className="top-text">共找到800个{inputRef.value}相关的视频</div>
        </div>
      </div>
      <div className="wrap">
        <div className="video-content">
          {videoList.map((item) => {
            return (
              <div key={item.id} className="context">
                <div className="content-left">
                  <img src={require("../assets/ppp.png")} />
                </div>
                <div className="content-right">
                  <p>{item.titile}</p>
                  <ul>
                    <li>企业版</li>
                    <li>赋能培训</li>
                  </ul>
                  <p>{item.details}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
